<template>
  <div class="about">
    <h1>This is a slot Demo</h1>
    <div class="content">
      <!--显示两个是因为还有子组件有2个默认插槽-->
      <solt-demo> default solt </solt-demo>
      <!--父组件里在子组件里定义的内容会传给子组件在插槽里显示,替代子组件的内容-->
      <!--如果为default,数据给没有名字的插槽  v-slot是2.6.0后的语法-->
      <solt-demo v-slot:header>
        <h1>this is header</h1>
      </solt-demo>

      <solt-demo v-slot:default>
        <h1>this is default</h1>
      </solt-demo>

      <solt-demo v-slot:footer>
        <h1>this is footer</h1>
      </solt-demo>

      <h3>~~~~~~~~~作用域插槽例1~~~~~~~~~</h3>
      <solt-demo v-slot:range="slotProps">{{ slotProps }}</solt-demo>
      <!--{ "myUser": "Ross" }-->

      <h3>~~~~~~~~~作用域插槽例2~~~~~~~~~</h3>
      <solt-demo :todos="todoLists">
        <template v-slot:list="slotProps">
          <div style="background:gold; border-bottom:2px solid darkseagreen;">
            {{slotProps.itemValue}}
          </div>
          <span v-if="slotProps.itemValue.isComplete">✓</span>
          {{  slotProps.itemValue.test }}
        </template>
      </solt-demo>
    </div>
  </div>
</template>

<script>
    import SoltDemo from "@/components/SoltDemo";

    export default {
        data() {
            return {
                age: 20,
                todoLists: [
                    {
                        test: '询问时间',
                        id: 1
                    },
                    {
                        test: '待办',
                        id: 2
                    },
                    {
                        test: '协同任务',
                        id: 3,
                        isComplete: true
                    }
                ]
            }
        },
        components: {
            SoltDemo
        }
    }
</script>

<style lang="scss" scoped>
  .about {
    text-align: center;
  }
</style>
